<template>
  <div id="app" style="height: 100%">
    <Container ref="makingForm" upload preview generate-code generate-json clearable>
      <template slot="action">
        <!-- <a-button @click="form1Btn">表单1</a-button> -->
      </template>
    </Container>

    <dialog-box :dialogInfo="editDialog" ref="editDialog" @saveData="saveData">
      <form-generate :forms="formsJsonData" ref="editForm" :remoteFuncs="remoteFuncs" :values="editForm">
        <!-- 自定义组件 -->
        <template slot="xxx-slot">
          <div style="width: 200px; height: 200px; cursor: pointer">hello world</div>
        </template>
      </form-generate>
      <a-button slot="view_btn" @click="close">关闭</a-button>
    </dialog-box>
  </div>
</template>
<script>
import Container from './components/Container.vue'
import DialogBox from './views/DialogBox.vue'
import FormGenerate from './views/FormGenerate.vue'
export default {
  components: { Container, DialogBox, FormGenerate },
  data() {
    return {
      editDialog: {
        title: '编辑',
        width: '800px',
        visible: false,
        action: true,
        show: true,
        role: null,
        loading: false
      },
      formsJsonData: {},
      remoteFuncs: {
        async func_test(resolve) {
          let data = [{ value: 1, label: 'tests' }]
          resolve(data)
        }
      },
      editForm: {},
      formKeys: 'testmodelkey'
    }
  },
  mounted() {
    this.formsJsonData = {
      list: [
        {
          type: 'input',
          name: '单行文本',
          icon: 'icon-input',
          options: {
            width: '100%',
            defaultValue: '',
            required: false,
            dataType: 'string',
            pattern: '',
            placeholder: '',
            disabled: false,
            hidden: false,
            remoteFunc: 'func_1659753618000_52098'
          },
          key: '1659753618000_52098',
          model: 'input_1659753618000_52098',
          rules: [
            {
              type: 'string',
              message: '单行文本格式不正确'
            }
          ]
        },
        {
          type: 'select',
          name: '下拉选择框',
          icon: 'icon-select',
          options: {
            defaultValue: '',
            multiple: false,
            disabled: false,
            hidden: false,
            clearable: false,
            placeholder: '',
            required: false,
            showLabel: false,
            width: '',
            options: [
              {
                value: 'Option 1'
              },
              {
                value: 'Option 2'
              },
              {
                value: 'Option 3'
              }
            ],
            remote: true,
            filterable: false,
            remoteOptions: [],
            props: {
              value: 'value',
              label: 'label'
            },
            remoteFunc: 'func_test'
          },
          key: '1660360586000_51525',
          model: 'select_1660360586000_51525',
          rules: []
        },
        {
          type: 'blank',
          name: 'tet',
          icon: 'icon-zidingyishuju',
          options: {
            defaultType: 'String',
            disabled: false,
            hidden: false,
            remoteFunc: 'func_1659754894000_94593'
          },
          key: '1659754894000_94593',
          model: 'xxx-slot',
          rules: []
        }
      ],
      config: {
        labelWidth: 100,
        labelCol: {
          span: 1,
          offset: 0
        },
        wrapperCol: {
          span: 1,
          offset: 0
        },
        labelPosition: 'right',
        formLayout: 'vertical',
        size: 'small'
      }
    }
  },
  methods: {
    form1Btn() {
      this.editDialog.visible = true
    },
    saveData() {},
    close() {
      this.dialogInfo.visible = false
    }
  }
}
</script>
